<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>系统通知</title>
    <link rel="stylesheet" href="/css/supplies/bootstrap.min.css"/>
    <link rel="stylesheet" href="/icon/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/supplies/common.css"/>
    <link rel="stylesheet" href="/js/supplies/bootstrap-table/bootstrap-table.min.css">
    <link rel="stylesheet" href="/css/loading.css">
    <link rel="stylesheet" href="/css/supplies/model.css">
    <link rel="stylesheet" href="/css/supplies/notification/notification.css">
    <style>
        a:hover{
            background:#fff !important;
        }

    </style>
</head>
<body>
<!--删除-->
<div id="list_notice" v-cloak>
    <div class="model_box delete_box">
        <div class="model_content ">
            <div class="model_info">
                <div class="model_info_title ">
                    <span style="font-size: 18px;font-weight: bold"> 删除通知</span>
                </div>
                <div class="model_info_cont font_size_14">
                    确定要删除这条通知？<br>
                    are you sure you want to delete this notification?
                </div>
            </div>
            <div class="model_bottom_bar">
                <div class="model_btn_save b" @click="delNotice()">
                    <div class="vertical-center bg-font">确认(determine)</div>
                </div>
                <div class="model_btn_cancel btn-2 " onclick="closeDeleteBox()">
                    <div class="vertical-center">取消(cancel)</div>
                </div>
            </div>
        </div>
    </div>
    <!--通知-->
    <div class="model_box collection_confirm_box">
        <div class="model_content ">
            <div class="back row " onclick="closeNotification()" style="cursor: pointer">
                <div class="col-lg-3 col-sm-3">
                    <img style="margin-left: 10px;margin-top: 10px;background-color: #999999" src="/image/supplies/icon/right.png"/>
                </div>
                <div class="col-lg-8 col-sm-8 ">
                    <span class="font_size_14">返回</span> <br>
                    <span class="font_size_14 bg-font">return</span>
                </div>

            </div>

            <img class="close_model_box  b" src="/image/supplies/icon/delete.png" onclick="closeNotification()">
            <div class="model_info" style="padding-top: 29px;">

                <div class="model_info_cont">
                    <div class="row">
                        <div class="col-lg-9 col-sm-8 ">
                            <div>
                                <span style="font-size: 18px">{{info.title}}</span> <br>
                            </div>
                            <div> <span style="font-size: 17px;color: #666666">{{info.title_english}}</span></div>
                            <div class="top2" style="color: #999999;font-size: 14px">{{info.create_time}}</div>
                        </div>
                       <!-- <div class="col-lg-3 col-sm-4">
                            <img class="pull-right" style="width: 130px;height: 130px"src="/image/supplies/myorder/food.png">
                        </div>-->
                    </div>
                    <div class="top2 text" style="padding-top: 10px;">
                        {{info.content}}
                    </div>

                </div>
            </div>
        </div>
    </div>
    <div class="title">

    <ul id="myTab" class="nav nav-tabs">
        <li class="active">
            <a href="#System" data-toggle="tab">
                <span class="font_size_14">系统通知</span> <br>
                <span class="font_size_14 en_title">system notification</span>
                <div class="title-bottom-border"></div>
            </a>
        </li>
        <li>
            <a href="#Customer" data-toggle="tab">
                <span class="font_size_14">联系客服</span> <br>
                <span class="font_size_14 en_title">contact customer service</span>
                <div class="title-bottom-border"></div>
            </a>
        </li>
    </ul>
    </div>
    <div id="myTabContent" class="tab-content ">
        <div class="tab-pane fade in active " id="System">
            <div id="tr">
                <div class="read-status activeSelected b bottom " @click="status($event,'main')">
                    <span class="font_size_14">全部</span> <br>
                    <span class="font_size_14 "> all</span>
                </div>
                <div class="read-status btns b " @click="status($event,'nul')">
                    <span class="font_size_14">未读</span> <br>
                    <span class="font_size_14">not read</span>
                </div>
                <div class="read-status btns b " @click="status($event,'read')">
                    <span class="font_size_14">已读</span> <br>
                    <span class="font_size_14">read</span>
                </div>
            </div>
            <div style="clear: both"></div>
            <div class="border"></div>
            <div class="top" style="clear: both" v-loading="loading">
                <div>
                    <table class="my_table" id="all-natification-table">
                        <thead>
                        <tr>
                            <th data-field="title"  style="width: 50%">
                                <span class="font_size_14 bg-font">标题</span> <br>
                                <span class="font_size_14 bg-font">title</span>
                            </th>
                            <th data-field="source" style="width: 20%">
                                <span class="font_size_14 bg-font">来源</span> <br>
                                <span class="font_size_14 bg-font">source</span>

                            </th>
                            <th data-field="time" style="width: 20%">
                                <span class="font_size_14 bg-font">时间</span> <br>
                                <span class="font_size_14 bg-font">time</span>

                            </th>
                            <th data-field="operating" style="width: 10%">
                                <span class="font_size_14 bg-font">操作</span> <br>
                                <span class="font_size_14 bg-font">process</span>

                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr data-index="0" v-for="vo in items" >
                            <td style="text-align: left" class="text-limit" @click="getInfo(vo.notice_id,vo.id)">
                                <div class="point" v-if="vo.status == 'nul'"></div>
                                <div style="padding-left: 28px">
                                    <span class="font_size_14 ">{{vo.title}}</span>
                                </div>
                            </td>
                            <td @click="getInfo(vo.notice_id,vo.id)">
                                <span class="font_size_14 ">{{vo.notice_source}}</span>
                            </td>
                            <td @click="getInfo(vo.notice_id,vo.id)">
                                <span class="font_size_14 " v-text="formatTime(vo.create_time)"></span>

                            </td>
                            <td>
                                <div class="operating">
                                    <img class=" b " src="/image/supplies/icon/delete.png"  @click="openDeleteBox(vo.id)">
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    <div class="pagearea">
                            <img src="/image/supplies/page_lower.png"  @click="nextPage($event)">
                            <img src="/image/supplies/page_upper.png" style="margin-right: 10px"  @click="upPage($event)">
                            <div class="page-total margin-right ">共0条记录 <br>
                                <div class="color-9">total 0 records</div>
                            </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="tab-pane fade in marginbottom" id="Customer">
            <div>
                <div class="border">
                    <span class="font_size_14">联系客服</span> <br>
                    <span class="font_size_14 bg-font">contact customer service</span>
                    <div class="top2" style="padding-top: 18px;"></div>
                </div>
                <div class="text2 ">
                    <div class="online_left ">
                        <img src="/image/supplies/icon/customer.png">
                        <div class="top font_size_18">
                            <span class=" color-6">在线客服</span> <br>
                            <span class=" color-9">online customer service</span>
                        </div>
                    </div>
                    <div class="online_right">
                        <img src="/image/supplies/icon/phone-l.png">
                        <div class="top font_size_18" >
                            <span class=" color-6">客服电话</span> <br>
                            <span class=" color-9">Consumer hotline</span>
                            <div class="top color-6">183 8826 8904</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="page-body-footer "></div>
</div>
<div id="supplierId" hidden><?php $str = substr($_COOKIE['user'], 6); echo json_decode($str,true)['id'] ?></div><!--获取商户端id-->
</body>
<script rel="script" src="/js/supplies/jquery.min.js"></script>
<script rel="script" src="/js/supplies/bootstrap.min.js"></script>
<script rel="script" src="/js/supplies/bootstrap-table/bootstrap-table.min.js"></script>
<script rel="script" src="/js/supplies/common.js"></script>
<!--<script src="/js/supplies/vue.min.js"></script>
<script src="/js/supplies/vue-resource.js"></script>-->
<script rel="script" src="/js/vue.js"></script>
<script rel="script" src="/js/vue-resource.js"></script>
<script rel="script" src="/js/loading.js"></script>
<script>
    $(function () {
        $('#myTab a').click(function (e) {
            e.preventDefault();
            $(this).tab('show');
            var title = $(this).html();
            if (title.indexOf("系统通知") >= 0) {
                var title = [];
                title[0] = {navTitle: "我的", e_navTitle: "my", titleImg: 1};
                title[1] = {navTitle: "系统通知", e_navTitle: "system notification", titleImg: 0};
                window.parent.editTitle(title);
            } else if (title.indexOf("联系客服") >= 0) {
                var title = [];
                title[0] = {navTitle: "我的", e_navTitle: "my", titleImg: 1};
                title[1] = {navTitle: "联系客服", e_navTitle: "contact customer service", titleImg: 0};
                window.parent.editTitle(title);
            }
        })
    });
    $supplierId = $('#supplierId').text();
    /*
     * @description : 获取订单列表
     * @params:
     * @author : peng huaneng
     * @date : 2018/1/18 10:29
     */
    var app = new Vue({
        el: "#list_notice",
        data: {
            items: [],
            searchs: {status: '', page: '1',supplier_id:$supplierId},
            maxPage: '',
            info: {
                title:"",
                title_english:"",
                create_time:"",
                content:""
            },
            delId: '',
            loading:true
        },
        methods: {
            req: function () {
                this.loading = true;
                var url = '__APP__/apishop/apishop/getNotice';
                this.$http.post(url, this.searchs, {
                    emulateJSON: true
                }).then(function (res) {
                    this.maxPage = res.body['maxPage'];
                    this.items = res.body['list'];
                    $str = "共" + res.body['count'] + "条记录<br> <div class=\"bg-font\">total " + res.body['count'] + " records </div>";
                    $('.page-total').html($str);
                    this.loading = false;
                }, function (res) {

                });
            },
            getInfo:function(id,read_id){
                $('.collection_confirm_box').fadeIn(300);
                var url = '__APP__/apishop/apishop/getNoticeInfo?id='+id+'&read_id='+read_id;
                this.$http.post(url, this.searchs, {
                    emulateJSON: true
                }).then(function (res) {
                    $('.collection_confirm_box').fadeIn(300);
                    this.info =  res.body['info'] ;
                    this.req();
                }, function (res) {

                });
            },
            openDeleteBox:function(id){
                this.delId = id;
                $('.delete_box').fadeIn(300);
            },
            delNotice:function(){
                var url = '__APP__/apishop/apishop/delNotice';
                this.$http.post(url, {id:this.delId}, {
                    emulateJSON: true
                }).then(function (res) {
                    closeDeleteBox();
                    this.req();
                }, function (res) {

                });
            },
            formatTime: function(create_time){
                return  formatDate(create_time ,"yyyy/MM/dd");

            },
            status: function (event,status) {
                $("#tr").find("div").each(function () {
                    $(this).removeClass("activeSelected");
                });
                $(event.currentTarget).addClass("activeSelected");

                if ('main' == status) {
                    this.searchs.status = '';
                } else {
                    if('nul' == status){
                        this.searchs.status = status
                    }
                    if('read' == status){
                        this.searchs.status = status
                    }
                }

                this.req();
            },
            upPage: function (event) {
                this.searchs.page--;

                if (this.searchs.page < 1) {
                    this.searchs.page = 1;

                    $(event.currentTarget).css("color", "#666666");
                }
                this.req();
            },
            nextPage: function () {
                this.searchs.page++;
                if (this.searchs.page > this.maxPage) {
                    this.searchs.page = this.maxPage;
                    $(event.currentTarget).css("color", "#666666");
                }
                this.req();
            },

        },
        mounted: function () {
            this.req();
        }
    })

    /*
     * @description : 删除数据
     * @params: 
     * @author : peng huaneng
     * @date : 2018/1/26 17:28
     */
    function openDeleteBox() {
        //弹出删除框
        $('.delete_box').fadeIn(300);
    }

    function closeDeleteBox() {
        //关闭删除框
        $('.delete_box').fadeOut(300);
    }

    //打开通知
    function openNotification(id) {
        //ajax 请求

        $('.collection_confirm_box').fadeIn(300);
    }

    //关闭通知
    function closeNotification() {
        $('.collection_confirm_box').fadeOut(300);
    }
</script>
</html>
